<template>
	<view>
		<nav-bar :title="product_info.name" @back="goBack" :isCenter="true"></nav-bar>
		<view class="about_product" v-if="product_info">
			<view class="companyImg pr" style="display: flex;">
				<swiper class="swiper-box" :autoplay="false" @change="change" :current="current_index"
					style="height: 650rpx;width:100%;">
					<swiper-item v-for="(item, index) in product_info.url" :key="index" @click="previewImg(index)" style="height: 650rpx;">
						<view class="swiper-item" style="height: 650rpx;">
							<image style="width: 100%;height:100%;" :src="getImgSrc(item)" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
				<text class="shuoy f13 pa" style="bottom:20rpx;right:20rpx;">
					{{ current_index + 1 }}/{{ product_info.url.length }}
				</text>
			</view>
			<view class="df ac sb mb8 bgcf" style="padding: 30rpx 30rpx;">
				<view class="f600 f18">
					{{ product_info.name }}
				</view>
				<view class="">
					<button class="f13 share" open-type="share" style="color: #0098E1;height:85rpx;">
						<view style="width:40rpx;height:40rpx;margin-left:7rpx;">
							<image style="width: 40rpx;"
								:src="getImgSrc('/uploads/20241105/1730775520672989e041d88.png')" mode="widthFix" />
						</view>
						<view class="">分享</view>
					</button>
				</view>
			</view>
			<view class="bgcf" style="padding: 25rpx 30rpx;">
				<view class="df ac mb10">
					<view class="info_left">所在地</view>
					<view class=""> {{ province ? province : '-' }} · {{ city ? city : '-' }}</view>
				</view>
				<view class="df ac mb10">
					<view class="info_left">加工工艺</view>
					<!-- <view class="">{{ product_info.machining || ''}}</view> -->
					<view class="">{{ product_info.machining ? product_info.machining.split('、').slice(0,2).join('、')+(product_info.machining.split('、').length>2 ? '...' : '') : ''}}</view>
				</view>
				<view class="df ac mb10">
					<view class="info_left">加工材料</view>
					<!-- <view class=""> {{ product_info.material || ''}}</view> -->
					<view class="">{{ product_info.material ? product_info.material.split('、').slice(0,2).join('、')+(product_info.material.split('、').length>2 ? '...' : '') : ''}}</view>
				</view>
				<view class="df ac" v-if="product_info.number">
					<view class="info_left">月产能</view>
					<view class=""> {{ product_info.number + product_info.piece }}</view>
				</view>
			</view>
			<view style="padding:10rpx 10rpx;">
				<view class="companyBox" style="margin-bottom: 0;padding: 30rpx 0 20rpx 20rpx;">
					<view style="display: flex;align-items: start;">
						<view class="logoUrl" style="margin-right: 10px;">
							<image :style="info.detail.logo ? '' : 'width:70%;'" :class=" logo ? '' : 'image_logo' "
								:src=" info.detail.logo ? img_path + info.detail.logo : img_path + logoUrl"
								mode="widthFix"></image>
							<view class="join_year f10 tc" v-if="info.userInfo.grade == 2">
								入驻{{ info.year }}年
							</view>
						</view>
						<view class="sanDeng" style="width: 460rpx;margin-right: 10rpx;">
							<view :class="info.company.length<=14 ? 'companyName' : 'companyName2'">{{ info.company }}</view>
							<view class="mt5 df ac" v-if="info && info.userInfo">
								<!-- 至尊会员 -->
								<view class="df ac mr10"
									v-if="info.userInfo.grade === 2 && info.userInfo.grade_type === 1">
									<image style="height: 40rpx;" :src="getImgSrc('/uploads/20250228/174070970167c11f451f7ad.png')" mode="heightFix">
									</image>
								</view>
								<!-- 基础会员 -->
								<view class="df ac mr10"
									v-if="info.userInfo.grade === 2 && info.userInfo.grade_type === 0">
									<image style="height: 40rpx;" :src="getImgSrc('/uploads/20250228/174070968667c11f3636140.png')" mode="heightFix">
									</image>
								</view>
								<view class="df ac" v-if="info.state === 1">
									<image style="height: 54rpx;" src="@/static/icon/gsrz_icon.png" mode="heightFix">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="bus_license" @click="goHome('/subPack/factoryDetails/factoryDetails',info.uid)"
						style="flex-direction: column;">
						<view>
							<image style="width:50rpx" :src="getImgSrc('/uploads/20240924/172714364666f21edeaf1f7.png')"
								mode="widthFix"></image>
						</view>
						<view class="f13" style="color: #0098E1;">
							企业主页
						</view>
					</view>
				</view>
			</view>
			<view style="padding:10rpx 10rpx;" v-if="list && list.length !=0">
				<view class="bgcf" style="padding: 20rpx;">
					<view class="f18 f600" style="padding:20rpx 0rpx;text-align: center;">其他产品</view>
					<view class="bgcf df ac sb" style="padding:0rpx 10rpx; flex-wrap: wrap;">
						<view class="add_product_item" v-for="(item,index) in list" :key="index"
							@click="goPage('/subPack/product/product-details',item.id)">
							<view style="padding:15rpx">
								<view class="product_img" v-if="isString(item.url)" ref="product_img"
									style="height:235rpx;">
									<image :src="getImgSrc(item.url)" mode="aspectFill" />
								</view>
								<!-- :style="{ height: img_width == 0 ? (337.7 * 0.75) + 'rpx' : (img_width * 0.75) + 'px' }" -->
								<view class="product_img" v-else ref="product_img" style="height:235rpx;">
									<image :src="getImgSrc(item.url[0])" mode="aspectFill" />
								</view>
								<view class="product_name mt10 f600">
									{{ item.name }}
								</view>
								<view class="product_tag mt5 f13">
									<view class="product_tag_text">{{item.machining || ''}}</view>
									<view class="product_tag_text">{{ item.material || ''}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="pd15 mt15 df ac sb nav_bom" v-if="info && info.userInfo"
		 :style="info.userInfo.grade == 2 ? 'justify-content: space-around;' : 'justify-content: space-between;'"
		 hover-class="none" :hover-stop-propagation="false">
			<view class="f13 df ac fc jc" style="color: #0098E1;width: 140rpx;" @click="collect">
				<view>
					<image style="width: 45rpx;max-height: 45rpx;"
						:src="product_info && product_info.relation === 1 ? getImgSrc('/uploads/20240930/172766189766fa07497ac38.png') : getImgSrc('/uploads/20240930/172766156966fa06014722e.png')"
						mode="widthFix"></image>

				</view>
				<view class="mt5"> {{ product_info && product_info.relation === 1 ? '已收藏' : '收藏此产品' }} </view>
			</view>
			<view v-if="info.userInfo.grade == 2" class="df ac btn_bom btn_bom1 ac jc cf" @click="onContact">
				<view class="mr5">
					<image style="width: 35rpx;max-height: 35rpx;"
						:src="getImgSrc('/uploads/20241105/173077671167298e878b889.png')" mode="widthFix"></image>
				</view>
				<view class="f14">联系供应商</view>
			</view>
			<view class="btn_bom2 btn_bom df ac jc cf" :style="info.userInfo.grade == 2 ? '' : 'width:420rpx'" @click="inquiry">
				<view class="mr5">
					<image style="width: 45rpx;max-height: 40rpx;"
						:src="getImgSrc('/uploads/20241105/173077666667298e5aedce0.png')" mode="widthFix"></image>
				</view>
				<view class="f14">在线询价</view>
			</view>
		</view>

		<view class="preview_box" v-if="is_preview" @click="is_preview = false">
			<view class="preview_item">
				<view class="swiperBox" v-if="preview_list.length!=0">
					<swiper class="" :autoplay="false" @change="changeImg" :current="current_index"
						:style="[{height: swiperHeight+ 'px',position:'relative'}]">
						<swiper-item v-for="(item, index) in preview_list" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index" style="height:auto">
								<image style="width: 100%;" :src="getImgSrc(item)" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="swipertitile">
				<view class="swiper-item productList-N">{{ product_info.name || ''}}</view>
				<view class="gy text_desc mt5">工艺：{{ product_info.machining || ''}}</view>
				<view class="cl text_desc">材料：{{ product_info.material || ''}}</view>
			</view>
		</view>
		
		<!-- <view class="preview_box" v-if="is_preview" @click="is_preview = false">
			<view class="preview_item">
				<view class="swiperBox" v-if="preview_list.length!=0">
					<swiper class="swiper-box" :autoplay="false" @change="changeImg" :current="current_index"
						:style="[{height: swiperHeight+ 'px',position:'relative',transition:'height 0.1s'}]">
						<swiper-item v-for="(item, index) in preview_list" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index" style="height:auto">
								<image style="width: 100%;" :src="getImgSrc(item.url)" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="swipertitile">
				<view class="swiper-item productList-N">{{preview_list[current_index].name}}</view>
				<view class="gy text_desc mt5">工艺：{{ preview_list[current_index].machining }}</view>
				<view class="cl text_desc">材料：{{ preview_list[current_index].material }}</view>
			</view>
		</view> -->


		<van-popup :show="showInquiry" :round="true" @close="showInquiry = false" :close-on-click-overlay="true"
			position="bottom">
			<Inquiry :info="inquiry_info" @changeName="changeName" @drawing="drawing" @delete="deletes"
				@fileName="fileName" @showToasts="showToasts" @changeRadio="changeRadio" @onSub="onSubInquiry" />
		</van-popup>
		<van-popup :show="ifStatus" round @close="ifStatus = false">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">您的详细资料{{ my_info.status == 1 ? '正在审核中' : '未通过审核' }}。</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="ifStatus = false">我知道了</p>
		</van-popup>

		<van-popup :show="show_model" round @close="show_model = false">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">{{ model_content }}</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="show_model = false">我知道了</p>
		</van-popup>

		<toast :value='showToast' title='微信禁止电脑端小程序上传文件' :ifHtml='true'
			content='1、可将文件发送至“文件传输助手”微信，通过手机上传文件发布。<br/>2、不上传文件发布。后添加微信xtwaixie，平台补充上传图纸文件。' btnText='知道了'
			@change='showToast=false' />
	</view>
</template>

<script>
	import {
		verifyPhoneNumber
	} from "@/utils/util"
	const http = require('../../utils/http');
	import NavBar from '@/component/nav-bar.vue';
	import Inquiry from '@/component/inquiry.vue'
	import {
		toast
	} from "@/component/toast.vue"
	export default {
		components: {
			NavBar,
			Inquiry,
			toast
		},
		data() {
			return {
				id: 0,
				uid: 0,
				ifStatus: false,
				showToast: false,
				show_model: false,
				is_preview:false,
				swiperHeight:0,
				preview_list:[],
				model_content: '',
				gscp: false,
				img_path: http.img_path,
				current_index: 0,
				list: [],
				product_info: null,
				info: null,
				logoUrl: '/uploads/20241023/17296509596718610f4d323.png',
				showInquiry: false,
				inquiry_info: {
					spare_parts_name: '',
					drawing: [],
					file_name: [],
					is_quotation: 0
				},
				province: '',
				city: '',
				my_info: null,
				callback:null
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.uid = opt.uid
			this.getList()
			// http.request('user/statisticLog',{
			// 	type:1,
			// 	relation_id:this.uid
			// }).then(res=>{
			// 	console.log(res)
			// })
		},
		onShareTimeline() {
			return {
				title: this.product_info.name ? this.product_info.name : '产品详情',
				query: 'id=' + this.id + '&uid=' + this.uid,
				path: "subPack/product/product-details"
			}
		},
		onShareAppMessage() {
			return {
				title: this.product_info.name ? this.product_info.name : '产品详情',
				path: "subPack/product/product-details?id=" + this.id + '&uid=' + this.uid,
			}
		},
		onUnload() {
			clearTimeout(this.callback)
		},
		methods: {
			previewImg(index) {
				this.is_preview = true
				this.current_index = index
				
				
				console.log(this.preview_list)
				setTimeout(() => {
					this.getCurrentSwiperHeight(`.swiper-item${index}`);
				}, 150)
				// const urls = this.product_info.url.map(item => this.getImgSrc(item))
				// uni.previewImage({
				// 	current: index,
				// 	urls: urls
				// })
			},
			getCurrentSwiperHeight(element){
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect((data) => {
					this.swiperHeight = data.height
				}).exec();
			},
			changeImg(e) {
				this.current_index = e.detail.current
				this.getCurrentSwiperHeight(`.swiper-item${this.current_index}`);
			},
			onContact() {
				this.callback = verifyPhoneNumber()
				if(this.callback) return
				// let token = uni.getStorageSync('token')
				// if (!token) {
				// 	this.unLoginToast()
				// 	return
				// }
				// if (this.my_info.status !== 2) {
				// 	this.ifStatus = true
				// 	return
				// }
				if(this.my_info.userInfo.cg_status != 2){
					// uni.showModal({
					// 	content: '仅限注册采购商联系',
					// 	confirmText: '去注册',
					// 	success(res) {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/my/editInfo'
					// 			})
					// 		}
					// 	}
					// })
					uni.showModal({
						content:this.my_info.userInfo.cg_status==0?'仅限注册采购商联系':'你的注册资料正在审核中，请耐心等待。',
						confirmText:this.my_info.userInfo.cg_status==0?'免费注册':'知道了',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/my/editInfo'
								})
							}
						}
					})
					return
				}
				
				const is_svip = this.info.userInfo.grade === 2 && this.info.userInfo.grade_type === 1
				if (this.info.is_show_mobile != 1 || !is_svip) {
					this.show_model = true;
					this.model_content = '该工厂暂时未授权电话咨询'
					return
				}

				this.checkLogin().then(res => {
					if (this.info.mobile) {
						const that = this
						uni.makePhoneCall({
							phoneNumber: this.info.mobile,
							success(res) {
								http.request('demand/getIp', {
									type: 6,
									id: that.id
								}).then((rest) => {
									console.log(rest);
									// uni.navigateTo({
									// 	url:'/subPack/factoryDetails/sendInquiry'
									// })
								}).catch((error) => {
									console.log(error);
								});
							}
						});
					} else {
						uni.showToast({
							title: '未获取到手机号！',
							icon: 'none'
						})
					}
				}).catch(err => {
					this.unLoginToast()
				})
			},
			collect() {
				// let token = uni.getStorageSync('token')
				// if (!token) {
				// 	this.unLoginToast()
				// 	return
				// }
				this.callback = verifyPhoneNumber()
				if(this.callback) return
				http.request('user/productCollect', {
					relation_id: this.id,
					operate: this.product_info.relation === 1 ? 2 : 1
				}).then(res => {
					http.request('user/productInfo', {
						id: this.id
					}).then(rest => {
						this.product_info.relation = rest.data.relation
						uni.showToast({
							title:res.message.msg,
							icon:'none'
						})
					})
				})
			},
			checkLogin() {
				let token = uni.getStorageSync('token')
				return new Promise((resolve, reject) => {
					token ? resolve() : reject()
				})
			},
			goPages(url, id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				})
			},
			goPage(url,id){
				uni.navigateTo({
					url:url + '?id=' + id + '&uid=' + this.uid
				})
			},
			goHome(url, id) {
				uni.reLaunch({
					url: url + '?id=' + id
				})
			},
			unLoginToast() {
				uni.showToast({
					title: '您还未登录，请先登录',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 1000);
			},
			changeRadio(index) {
				this.inquiry_info.is_quotation = index
			},
			onSubInquiry() {
				if (this.inquiry_info.spare_parts_name.trim() == '') {
					uni.showToast({
						title: "请输入需求说明",
						icon: "none"
					})
					return
				}
				const file_name = this.inquiry_info.file_name.map(item => item.name) || []
				const file = this.inquiry_info.file_name.map(item => item.url) || []
				http.request('demand/add', {
					user_settled_id: this.info.id,
					source: 2,
					quote_type: this.inquiry_info.is_quotation,
					drawing: this.inquiry_info.drawing,
					file,
					file_name,
					spare_parts_name: this.inquiry_info.spare_parts_name
				}).then(res => {
					console.log(res)
					http.request('demand/getIp', {
						type: 7,
						id: res.data.relation_id
					}).then(rest => {
						this.showInquiry = false
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			showToasts(val) {
				this.showToast = val
			},
			fileName(val) {
				console.log(val)
				this.inquiry_info.file_name.push(val)
			},
			deletes(data) {
				if (data.name == 'img') {
					this.inquiry_info.drawing.splice(data.index, 1)
				} else {
					this.inquiry_info.file_name.splice(data.index, 1)
				}
			},
			drawing(val) {
				console.log(val, 'drawing-val')
				this.inquiry_info.drawing.push(val)
			},
			changeName(val) {
				this.inquiry_info.spare_parts_name = val
			},
			inquiry() {
				this.callback = verifyPhoneNumber()
				if(this.callback) return
				// let token = uni.getStorageSync('token')
				// if (!token) {
				// 	this.unLoginToast()
				// 	return
				// }
				// if (this.my_info.status !== 2) {
				// 	this.ifStatus = true
				// 	return
				// }
				if(this.my_info.userInfo.cg_status != 2){
					// uni.showModal({
					// 	content: '仅限注册采购商询价',
					// 	confirmText: '去注册',
					// 	success(res) {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/my/editInfo'
					// 			})
					// 		}
					// 	}
					// })
					uni.showModal({
						content:this.my_info.userInfo.cg_status==0?'仅限注册采购商询价':'你的注册资料正在审核中，请耐心等待。',
						confirmText:this.my_info.userInfo.cg_status==0?'免费注册':'知道了',
						// content: '你的注册资料正在审核中，请耐心等待。',
						// confirmText: '知道了',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/my/editInfo'
								})
							}
						}
					})
					return
				}
				const is_svip = this.info.userInfo.grade === 2 && this.info.userInfo.grade_type === 1
				// if (!is_svip) {
				// 	this.show_model = true
				// 	this.model_content = '该工厂暂未开通此功能'
				// 	return
				// }

				this.showInquiry = true
			},
			getList() {
				http.request('user/productInfo', {
					id: this.id
				}).then(res => {
					this.product_info = res.data

					if (typeof this.product_info.url == 'string' && this.product_info.url[0] != '[') {
						this.product_info.url = [this.product_info.url]
					} else {
						this.product_info.url = JSON.parse(this.product_info.url)
					}
					
					this.preview_list = this.product_info.url.map(item=>item)
					http.request('user/productList', {
						uid: this.uid
					}).then(res => {
						this.list = res.data.list.filter(item => item.id != this.product_info.id)
						
						this.list.forEach(el=>{
							if (el.url.startsWith('[')) {
								try {  
									el.url = JSON.parse(el.url);  
								} catch (e) {  
									el.url = null;
								}
							}
						})
						console.log(this.list)
					})
				})
				http.request('user/settledInfo', {
					id: this.uid
				}).then(res => {
					this.province = res.data.info.province
					this.city = res.data.info.city
					console.log(this.city, this.province)
					this.info = res.data.info
				})
				http.request('user/settledInfo').then(res => {
					this.my_info = res.data.info
				})
			},
			isString(value) {
				return typeof value === 'string';
			},
			change(e) {
				this.current_index = e.detail.current
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.product {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 1);
		position: fixed;
		top: 0;
		z-index: 111;
	}

	.uni-margin-wrap {
		padding: 20% 0 20% 0;
		height: 80%;

		.swiper {
			height: 100%;
		}

		image {
			width: 100%;
			height: 80%;
			object-fit: cover;
		}

		view {
			color: white;
		}
	}

	.productList-N {
		background-color: gray;
		padding: 4px 8px;
		border-radius: 8px 8px;
		margin-left: 10px;
		text-align: center;
		display: inline;
	}

	.gy {
		margin-left: 10px;
		line-height: 40px;
	}

	.cl {
		margin-left: 10px;
	}

	.add_product_item {
		margin-bottom: 20rpx;
		width: 48%;
		border: 7rpx solid #CDCDCD;
		justify-content: center;
		flex-direction: column;
		border-radius: 10rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.4);
		// padding:10rpx;
		// padding: 50rpx 0rpx;
		box-sizing: border-box;

		.name {
			color: #CDCDCD;
			// padding-bottom: 50rpx;
		}

		.product_img {
			position: relative;
			width: 100%;
			// min-height: 250rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.top_up {
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				padding: 8rpx 15rpx;
				background-color: #FFD300;
				border-radius: 10rpx;
			}
		}

		.product_tag {
			color: #A2A2A2;
			height: 68rpx;

			.product_tag_text {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.product_bom {
			border-top: 1px solid #a2a2a2a3;
			padding: 10rpx;
			justify-content: flex-end;
		}
	}

	.nav_bom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		box-sizing: border-box;

		.btn_bom {
			height: 85rpx;
			border-radius: 50rpx;
			box-sizing: border-box;
		}

		.btn_bom1 {
			width: 250rpx;
			background: #E83224;
		}

		.btn_bom2 {
			width: 230rpx;
			background: #0F50C6;
		}
	}

	.companyBox {
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		align-items: center;
		background-color: #FFF;
		border-radius: 20rpx 20rpx;

		.bus_license {
			width: 100rpx;
			height: 100rpx;
			justify-content: center;
			display: flex;
			align-items: center;

			image {
				width: 80%;
				height: 80%;
			}
		}

		image {
			width: 120rpx;
			height: 120rpx;
			// margin-right: 10px;
			border-radius: 16rpx;
		}

		view {

			// width: 550rpx;
			.companyName {
				height:65rpx;
				// overflow: hidden;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				line-height: 65rpx;
			}
			.companyName2 {
				height:65rpx;
				// overflow: hidden;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				// line-height: 65rpx;
			}

			.companyParticulars {
				font-size: 27rpx;
				color: #9C9C9C;
				line-height: 1.5;
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
			}
		}
	}

	.about_product {}

	.swiper-box {
		position: absolute ;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	.info_left {
		width: 150rpx;
		color: gray;
	}

	.shuoy {
		max-width: 100rpx;
		padding: 8rpx 22rpx;
		border-radius: 30rpx;
		max-height: 70rpx;
		background-color: rgba(255, 255, 255, 0.5);
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.companyImg {
		width: 100%;
		height: 650rpx;
		background: #000;
		position: relative;
		overflow: hidden;

		// background: black;
		.leftSliding {
			width: 200rpx;
			height: 90%;
			position: absolute;
			right: -140rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 50%;
			padding-left: 10rpx;
			font-size: 26rpx;

			image {
				width: 60rpx;
				height: auto;
				display: block;
			}
		}
	}

	.logoUrl {
		width: 120rpx;
		height: 120rpx;
		background-color: #D2D2D2;
		border-radius: 12rpx;
		position: relative;
		overflow: hidden;

		.image_logo {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.sc_logo {
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			color: #Fff;
			padding: 8rpx 0rpx;
			text-align: center;
		}
	}

	.join_year {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		color: #404E64;
		background: linear-gradient(to right, #FDE59B, #FDDD8B, #FBB740);
	}

	.preview_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #000;
		z-index: 999;

		.preview_item {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: auto;
			transform: translateY(-50%);
		}

		.swipertitile {
			position: absolute;
			bottom: 150rpx;
			left: 30rpx;
			color: #fff;
		}
	}
</style>